<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>运维管理系统</title>
    <!--引入css-->
    <!--Open Sans Font-->
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700' rel='stylesheet' type='text/css'>
    <!--Bootstrap Stylesheet [ REQUIRED ]-->
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/bootstrap.min.css') }}">
    <!--Nifty Stylesheet [ REQUIRED ]-->
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/nifty.css') }}">
    <!--Nice Validator-->
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='plugins/nice-validator/jquery.validator.css') }}">
    <!--bees-->
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/bees.css') }}">

</head>

<body>
    <div id="container" class="cls-container">

		<div id="bg-overlay" class="bg-img"></div>


		<div class="cls-content">
		    <div class="cls-content-sm panel">
		        <div class="panel-body">
		            <div class="mar-ver pad-btm">
		                <h1 class="h3">账号登录</h1>
		            </div>
		            <form name="loginForm">
		                <div class="form-group">
		                    <input type="text" name="username" class="form-control" placeholder="请输入用户名或手机号" data-rule="用户名或手机号: required;"  autocomplete="off">
		                </div>
		                <div class="form-group">
		                    <input type="password" name="password" class="form-control" placeholder="请输入密码" data-rule="密码: required;"  autocomplete="off">
		                </div>
		                <div class="checkbox pad-btm text-left">
		                    <input id="form-checkbox" name="remember" class="magic-checkbox" type="checkbox">
		                    <label for="form-checkbox">记住我</label>
		                </div>
		                <button class="btn btn-primary btn-lg btn-block" type="submit">登录</button>
		            </form>
		        </div>

		        <div class="pad-all">
		            <a href="#" class="btn-link mar-rgt">忘记密码 ?</a>
		            <a href="#" class="btn-link mar-lft">创建新账号</a>
		        </div>
		    </div>
		</div>
    </div>



    <!--引入JavaScript-->
    <!--jQuery [ REQUIRED ]-->
    <script src="{{ url_for('static', filename='js/jquery.min.js') }}"></script>
    <!--BootstrapJS [ RECOMMENDED ]-->
    <script src="{{ url_for('static', filename='js/bootstrap.min.js') }}"></script>
    <!--NiftyJS [ RECOMMENDED ]-->
    <script src="{{ url_for('static', filename='js/nifty.js') }}"></script>
    <!--Nice Validator-->
    <script src="{{ url_for('static', filename='plugins/nice-validator/jquery.validator.min.js') }}"></script>
    <script src="{{ url_for('static', filename='plugins/nice-validator/local/zh-CN.js') }}"></script>
    <!--Bees-->
    <script src="{{ url_for('static', filename='js/bees.js') }}"></script>
    <!--CsrfJS-->
    <script src="{{ url_for('static', filename='js/csrf.js') }}"></script>


    <script>
        var $formEle = $('form[name="loginForm"]');
        bees.niceValidate($formEle);
        $formEle.on("valid.form", function () {
            setAjaxCSRFToken();
            $.ajax({
                type: 'post',
                url: '{{ url_for("users.login") }}?step=first',
                data : {
                    'username': $('input[name="username"]').val(),
                    'password': $('input[name="password"]').val(),
                    'remember': $('input[name="remember"]').prop("checked") ? 1 : 0
                },
                success: function (result) {
                    if (result.code != 200) {
                        $formEle.find('*[name='+ result.data.field +']').focus().addClass('has-error');
                        bees.tipError({
                            message: result.data.message
                        });
                    }else {
                        if(result.data.otp_auth){
                            window.location.href = '{{ url_for("users.mfa") }}'
                        }
                        else{
                             window.location.href = '/'
                        }
                    }
                }
            });
        });
    </script>

</body>
</html>
